<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <p>新闻1</p>
    <p>新闻2</p>
    <p>新闻3</p>
    <p>新闻4</p>
    <p>新闻5</p>
    <p>新闻6</p>
    <p>新闻7</p>
    <p>新闻8</p>
    <p>新闻9</p>
    <section>爱好：
        <input type="checkbox" checked="checked">玩游戏
        <input type="checkbox" checked="checked">打麻将
        <input type="checkbox">游泳
        <input type="checkbox">健身
    </section>
    <button id="btn">反选</button>
    <script src="/jquery.js"></script>
    <script>
        //给第一个添加样式
        // $('p:first').css('background','#f00');

        //给最后一个添加样式
        //$('p:last').css('background','#f00');

        //查找第几行，下标从0开始
        $('p:eq(7)').css('background','#f00');

        //查找偶数行，下标从0开始
        //$('p:even').css('background','#f00');

        //查找奇数行，下标从零开始
        //$('p:odd').css('background','#f00');

        //查找下标大于N，下标从零开始
        //$('p:gt(3)').css('background','#f00');

        //查找下标小于N，下标从零开始
        //$('p:lt(3)').css('background','#f00');

        //点击的时候就实现反选
        $('#btn').on('click', function () {
            var a = $('input:checked');
            var b = $('input:not(:checked)');
            a.prop('checked', false);
            b.prop('checked', true);
            //console.log(b);

        });
    </script>
</body>

</html>